<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #cccccc;
        }
        #calculater{
            margin: 100px 0 0 150px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="calculater">
    <p>
        <input type="text" class="formerInput" value="1"/>
        <span class="sign">-</span>
        <input type="text" class="laterInput" value="1"/>
        <span>=</span>
        <span class="resultOutput"></span>
    </p>
    <p>
        <input type="button" value="+" class="btn" title="add">
        <input type="button" value="-" class="btn" title="sub">
        <input type="button" value="x" class="btn" title="mul">
        <input type="button" value="/" class="btn" title="div">
    </p>
</div>
<script>
    var calculater = document.querySelector("#calculater");
    var formerInput = calculater.querySelector('.formerInput');
    var laterInput = calculater.querySelector('.laterInput');
    var sign = calculater.querySelector('.sign');
    var resultOutput = calculater.querySelector('.resultOutput');
    var btns = calculater.querySelectorAll('.btn');

    for(var i=0;i<btns.length;i++){
        btns[i].onclick =function () {
            console.log(this.title);
            switch(this.title){
                case 'add':
                    addHandler();
                    break;
                case 'sub':
                    subHandler();
                    break;
                case 'mul':
                    mulHandler();
                    break;
                case 'div':
                    divHandler();
                    break;
            }
        }
    }

    function addHandler() {
        sign.innerHTML = '+';
        resultOutput.innerHTML = parseInt(formerInput.value) + parseInt(laterInput.value);
    };
    function subHandler() {
        sign.innerHTML = '-';
        resultOutput.innerHTML = parseInt(formerInput.value) - parseInt(laterInput.value);
    };
    function mulHandler() {
        sign.innerHTML = '*';
        resultOutput.innerHTML = parseInt(formerInput.value) * parseInt(laterInput.value);
    };
    function divHandler() {
        sign.innerHTML = '/';
        resultOutput.innerHTML = (parseInt(formerInput.value) / parseInt(laterInput.value)).toFixed(2);
    };
</script>
</body>
</html>